import React from "react";
import {ActivityIndicator, InteractionManager, ScrollView, View, Image, TouchableOpacity, Text, Platform , Linking} from "react-native";
import chjStyle from "../../CustomStyle";
import HomePageCarList from "./components/HomePageCarList";
import CustomStyle from "../../../common/style/CustomStyle";
import HomePageNews from "./components/HomePageNews";
import {connect} from "react-redux";
import SaleHeader from "../../components/SaleHeader";
import ViewPager from 'react-native-viewpager';

const dataSource = new ViewPager.DataSource({
    pageHasChanged: (p1, p2) => p1 !== p2,
});

class HomePageUI extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {
            isLoading: true,
        };
        // 设置定时重复任务的示例
        // setInterval(()=>{}, 1000);
    }

    // 组件被加载时
    componentDidMount() {
        InteractionManager.runAfterInteractions(
            () => {
                this.setState({isLoading: false})
            }
        );
    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        return (
            <View style={chjStyle.mainContainer}>
                <SaleHeader />
                <View style={{flex: 1}}>
                    <View style={{height: chjStyle.getActualSizeInVertical(2), backgroundColor: '#ffc000'}}/>
                    {this.state.isLoading ?
                        <ActivityIndicator
                            animating={true}
                            style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                            size="large"/> :
                        <ScrollView >
                            <View style={{
                                height: chjStyle.getActualSizeInVertical(350),
                                flexDirection: 'row',
                                alignItems: 'flex-start'}}>
                                <ViewPager
                                    style={{height:chjStyle.getActualSizeInVertical(350)}}
                                    dataSource={
                                        dataSource.cloneWithPages([
                                            'http://g.chehangjia.cn/websys/cshop/src/dangjian/banner1.jpg',
                                            'http://g.chehangjia.cn/websys/cshop/src/dangjian/banner2.jpg',
                                            'http://g.chehangjia.cn/websys/cshop/src/dangjian/banner3.jpg'
                                        ])
                                    }
                                    renderPage={(data)=>{
                                        return (
                                            <Image source={{uri:data}}
                                                   style={{width: chjStyle.getActualSizeInHorizontal(750),
                                                       height: chjStyle.getActualSizeInVertical(350)}}
                                            />
                                        );
                                    }}
                                    isLoop={true}
                                    autoPlay={true}/>
                            </View>
                            <TouchableOpacity
                                onPress={()=>{
                                    if(Platform.OS === 'ios') {
                                        Linking.canOpenURL('ZGCWAPP://').then(canOpen=>{
                                            if (!canOpen) {
                                                Linking.openURL('https://itunes.apple.com/cn/app/zhong-gu-che-wang/id1099071725');
                                            } else {
                                                Linking.openURL('ZGCWAPP://');
                                            }
                                        });
                                    } else if (Platform.OS === 'android') {
                                        Linking.canOpenURL('zgcwapp://').then(canOpen=>{
                                            if (!canOpen) {
                                                Linking.openURL('https://android.myapp.com/myapp/detail.htm?apkName=com.jxtb.zgcw&ADTAG=mobile');
                                            } else {
                                                Linking.openURL('zgcwapp://');
                                            }
                                        });
                                    }
                                }}
                                style={{
                                    flexDirection:'row',
                                    paddingLeft: chjStyle.getActualSizeInHorizontal(48),
                                    paddingRight: chjStyle.getActualSizeInHorizontal(48),
                                    width: chjStyle.getActualSizeInHorizontal(750),
                                height:chjStyle.getActualSizeInVertical(88),
                                backgroundColor: '#ff971d',
                                justifyContent: 'space-between',
                                alignItems: 'center'}}
                            >
                                <Image source={require('../../../img/shop.png')}
                                       resizeMode={'contain'}
                                       style={{width: chjStyle.getActualSizeInHorizontal(48), height: chjStyle.getActualSizeInVertical(48)}}/>
                                <Text style={[CustomStyle.baseText, {
                                    color: '#f6f6f6',
                                    fontSize: CustomStyle.getActualFontSize(28),
                                }]}>我是商家</Text>
                                <Image source={require('../../../img/forword-1.png')}
                                       resizeMode={'contain'}
                                       style={{width: chjStyle.getActualSizeInHorizontal(18), height: chjStyle.getActualSizeInVertical(30)}}/>
                            </TouchableOpacity>
                            < HomePageCarList
                            />
                            <View
                                style={{backgroundColor: "#f6f6f6", height: CustomStyle.getActualSizeInVertical(20),}}/>
                            <HomePageNews />
                        </ScrollView>
                    }
                </View>
            </View>
        );
    }

}


const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePageUI);
